/*
 * Create:      柿子
 * CreateDate:  2022/07/25 
 * Describe：   更换验光室
 * */
import React, { Component } from 'react';
import { message, Modal, Select } from 'antd';
import { $http } from 'containers/config/https';
import '../style/index.less';

class ReplaceTheOptometryRoom extends Component {
  constructor(props) {
    super(props);
    this.state = {
      rowData: {},
      visible: false,
      areaRoomID: undefined
    }
  }

  componentDidMount() {
    this.props.onRef && this.props.onRef(this);
  }

  // 修改弹窗状态
  modifyVisible = (visible, rowData) => {
    this.setState({ visible, rowData, areaRoomID: rowData && rowData.areaRoomID ? rowData.areaRoomID : undefined })
  }

  // 確認
  handleOk = () => {
    let { rowData, areaRoomID } = this.state;
    if (!areaRoomID) {
      message.error('请先选择需要切换的验光室。')
      return
    };
    let data = {
      params: [{
        queID: rowData?.queID,
        areaRoomID
      }]
    }
    $http.post('urlS', this, {
      code: '17010010',
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          message.success(res.errorMessage || '更换验光室成功');
          this.modifyVisible(false);
          this.props.getTableData && this.props.getTableData('N');
        }
      }
    })
  }

  // 切换验光室
  handleAreaRoomChange = e => {
    this.setState({ areaRoomID: e });
  }

  // 处理验光室下拉数据
  filterOptometryRoomData = () => {
    let { optometryRoomData } = this.props;
    return optometryRoomData && optometryRoomData.map(item => {
      return {
        ...item,
        id: item.areaRoomID,
        descripts: item.areaRoomDesc + '（' + (item.loginStatus === 'on' ? '在线' : '离线') + '）'
      }
    })
  }

  render() {
    let { visible, areaRoomID, rowData } = this.state;

    return (
      <Modal
        width="520px"
        title="更换验光室"
        className="replace-the-optometry-room"
        destroyOnClose={true}
        visible={visible}
        onOk={this.handleOk}
        onCancel={() => this.modifyVisible(false)}
      >
        <div >
          <div style={{ marginBottom: 24 }}>
            <span className="replace-the-optometry-room-label">
              原验光室：
            </span>
            {rowData?.areaRoomDesc}
          </div>
          <div>
            <span className="replace-the-optometry-room-label">
              切换至验光室：
            </span>
            <Select
              showSearch
              value={areaRoomID}
              placeholder="请选择"
              optionFilterProp="search"
              className="common-query-input"
              style={{ width: 250 }}
              onChange={this.handleAreaRoomChange}
            >
              {React.$SelectOptions(this.filterOptometryRoomData())}
            </Select>
          </div>
        </div>
      </Modal>
    );
  }
}

export default ReplaceTheOptometryRoom;
